<template>
	<div>
		<div class="left noScroll" v-if="leftShow">
			<NewSection :type="11" imgType="plan" title="应急预案库">
				<div class="left-cont">
					<div class="left-cont-count">
						<div class="left-cont-count-item" v-for="(item,index) in countList" :key="index">
							<img :src="item.img" >
							<div class="left-cont-count-item-text">
								<div class="left-cont-count-item-text-title">{{item.title}}</div>
								<div class="left-cont-count-item-text-count">{{item.count}}</div>
							</div>
						</div>
					</div>
					<Icon type="ios-arrow-back" size="24" color="#E4E4E5" class="leftIcon" :class="{'cursor-pointer':rightType}" @click.stop="goRight"/>
					<Icon type="ios-arrow-forward" size="24" color="#E4E4E5" class="rightIcon" :class="{'cursor-pointer':leftType}" @click.stop="goLeft"/>
					<div style="margin: 0 46px;overflow: hidden;">
						<div id="dragDiv" ref="line">
							<div class="left-cont-tab">
								<div v-for="(item,index) in tabLeftList" :key="index" class="left-cont-tab-item"
									:class="{'left-cont-tab-item-in' : tabLeftIndex == index}"
									@click.stop="tabLeftClick(index)">
									<div class="left-cont-tab-item-title">{{item.typeName}}</div>
									<div class="left-cont-tab-item-count">{{item.typeCount}}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="left-cont-condition">
						<div class="left-cont-condition-item" v-for="(item,index) in conditionList" :key="index">
							<div class="item-top" @click.stop="item.subShow = !item.subShow"
								:style="{'background-image':'url('+imgBgc[item.levelName]+')'}">
								<div class="left-cont-condition-item-left">{{item.levelName}}</div>
								<div class="left-cont-condition-item-right">
									{{item.levelCount}}
									<Icon custom="i-icon icon-xiajiantou2" size="16"
										class="left-cont-condition-item-right-icon"
										:class="{'current-icon':item.subShow}" />
								</div>
							</div>
							<div class="item-cont" v-if="item.subShow">
								<div class="item-cont-list-item" v-for="(items,indexs) in item.emergentPlantypeListList"
									:key="indexs">
									<div class="item-cont-list-item-delate" @click.stop="onClickPlanVisible(items)">
										<div>
											{{items.resPlanName}}
										</div>
										<Icon custom="i-icon icon-daifenpai" size="20" />
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
		</div>
		<div class="right noScroll" v-if="rightShow">
			<NewSection :type="12" imgType="sl" title="进行中计划">
				<div class="right-cont">
					<div class="right-cont-tab">
						<div v-for="(item,index) in tabRightList" :key="index" class="right-cont-tab-item cursor-pointer"
							:class="{'right-cont-tab-item-in' : tabRightIndex == index}"
							@click.stop="tabRightClick(index)">
							<div class="right-cont-tab-item-title">{{item.title}}</div>
							<div class="right-cont-tab-item-count">{{item.count}}</div>
						</div>
					</div>
					<div class="right-cont-list">
						<div class="right-cont-detail" v-for="(item,index) in tabRightDetailedList" :key="index">
							<div class="right-cont-detail-line"></div>
							<div class="right-cont-detail-item" @click.stop="planDetailClick(item)">
								<div class="right-cont-detail-item-title flex j-between">
									<p>{{item.planName}}
										<!-- <span>[路面污染]</span> -->
									</p>
									<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer" />
								</div>
								<div class="right-cont-detail-item-status">
									<div class="right-cont-detail-item-status-time">{{item.createTime}}</div>
									<div class="right-cont-detail-item-status-status">
										{{item.status}}
									</div>
								</div>
								<div class="right-cont-detail-item-plan">应急预案：{{item.resPlanName}}</div>
								<div class="right-cont-detail-item-place">作业位置：{{item.workPlaceDetail}}</div>
								<div class="right-cont-detail-item-tab">
									<div class="right-cont-detail-item-tab-item">
										<Icon custom="i-icon icon-cheliangshiti" size="30" class="right-cont-title-icon" />
										<div class="right-cont-detail-item-tab-item-count">
											<span>车辆</span>
											<span>{{item.askCarCount}}</span>
										</div>
									</div>
									<div class="right-cont-detail-item-tab-item">
										<Icon custom="i-icon icon-biaoshi_renyuan" size="30"
											class="right-cont-title-icon" />
										<div class="right-cont-detail-item-tab-item-count">
											<span>人员</span>
											<span>{{item.askEmpCount}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
		</div>

		<div class="right-plan noScroll" v-if="rightDetailShow">
			<NewSection :type="13" imgType="detail" title="计划详情">
				<div class="right-plan-close" @click.stop="closeDetailClick">
					<Icon custom="i-icon icon-guanbi" size="20" slot="close"/>
				</div>
				<div class="right-plan-detail">
					<div class="right-plan-cont">
						<div class="right-plan-cont-msg">
							<div class="right-plan-cont-msg-title">
								<p>{{planDetailData.planName}}</p>
								<p>[{{planDetailData.resPlanName}}]</p>
							</div>
							<div class="right-plan-cont-msg-item">
								<p>应急预案：</p>
								<p>{{planDetailData.eventtype}}</p>
							</div>
							<div class="right-plan-cont-msg-item">
								<p>责任人：</p>
								<p>{{planDetailData.dutyPerson}}</p>
							</div>
							<div class="right-plan-cont-msg-item">
								<p>创建时间：</p>
								<p>{{planDetailData.createTime}}</p>
							</div>
							<div class="right-plan-cont-msg-item">
								<p>车辆要求：</p>
								<p>{{planDetailData.car}}</p>
							</div>
							<div class="right-plan-cont-msg-item">
								<p>人员要求：</p>
								<p>{{planDetailData.peoples}}</p>
							</div>
							<div class="right-plan-cont-msg-imgs">
								<div class="right-plan-cont-msg-imgs-img">
									<img src="http://47.108.13.13:6977/gchb2.5/service/file/view?id=1390277637084024832" alt="">
								</div>
							</div>
						</div>
						<div class="right-plan-cont-line">
							<img src="../../../../assets/new/new_img_line.png">
						</div>
						<div class="right-plan-cont-case">
							<div class="right-plan-cont-case-title">
								人车情况
							</div>
							<div class="right-plan-cont-case-cont">
								<div class="right-plan-cont-case-cont-item" v-for="(item,index) in caseList" :key="index">
									<img src="../../../../assets/new/new_plan_people.png" alt="">
									<div class="right-plan-cont-case-cont-item-msg">
										<div>[{{item.keyword}}]<span>{{item.name}}</span></div>
										<!-- <div>{{item.desc}}</div> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
		</div>

		<!-- 预案详情 -->
		<Modal v-model="planVisible" footer-hide :closable="false" width="934">
			<div class="plan-detail">
				<div class="plan-detail-top">
					<div class="plan-detail-top-title">
						预案详情
					</div>
					<img src="../../../../assets/new/new_close.png" @click="planVisible = !planVisible">
				</div>
				<div class="plan-cont">
					<p>{{leftPlanData.resPlanName}}</p>
					<div class="plan-cont-img">
						<img src="../../../../assets/new/new_img_line.png" >
					</div>
					<ul>
						<li>
							<span>应急类型：</span>{{leftPlanData.emergentType}}
						</li>
						<li>
							<span>预案等级：</span>{{leftPlanData.emergentLevel}}
						</li>
						<li>
							<span>车辆要求：</span>{{leftPlanData.askCar}}
						</li>
						<li>
							<span>人员要求：</span>{{leftPlanData.askEmp}}
						</li>
						<li>
							<span>备注：</span>{{leftPlanData.remark}}--
						</li>
					</ul>
				</div>
				<div class="distribution-plan flex j-center">
					<div class="distribution-plan-btn cursor-pointer" @click="onClickDistributionPlan">下发应急计划</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import MainSection from '../template/MainSection'
	import NewSection from '../subject/NewSection'
	import bus from '@/utils/bus'
	export default {
		components: {
			MainSection,
			NewSection
		},
		data() {
			return {
				leftShow: true,
				rightShow: true,
				rightDetailShow: false,
				countList: [{
					img:require('../../../../assets/new/new_plan_right.png'),
					title: '预案总数',
					count: 0
				},
				{
					img:require('../../../../assets/new/new_plan_left.png'),
					title: '计划总数',
					count: 0
				}],
				imgBgc:{
					'1级':require('../../../../assets/new/plan_3.png'),
					'2级':require('../../../../assets/new/plan_1.png'),
					'3级':require('../../../../assets/new/plan_2.png'),
					'4级':require('../../../../assets/new/plan_4.png'),
					'5级':require('../../../../assets/new/plan_5.png'),
					'6级':require('../../../../assets/new/plan_6.png')
				},
				tabLeftList: [],
				tabLeftIndex: 0,
				conditionList: [],
				tabRightListData: [],
				tabRightList: [],
				tabRightDetailedList: [],
				tabRightIndex: 0,
				planDetailData: {},
				caseList: [],
				// 预案详情弹框
				planVisible: false,
				leftPlanData: {},
				markerData: [],
				left:0,
				index:0
			};
		},
		computed: {
			leftType(){
				return this.tabLeftList.length-3>this.index
			},
			rightType(){
				return this.index!=0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapActions([
				'updateRoadAttributeAllList'
			]),
			init() {
				this.updateRoadAttributeAllList()
				this.getEmergentIntend()
				this.getOngoingEmergentPlan()
				bus.$on('openPlanDetail', obj => {
					let planDetail = this.tabRightDetailedList.filter(item => item.id == obj.id)
					this.planDetailClick(planDetail[0])
				})
			},
			goLeft(){
				if(this.tabLeftList.length-3<=this.index){
					return false
				}
				this.$refs.line.style.left = (this.left-90)+'px'
				this.left -= 90
				this.index++
			},
			goRight(){
				if(this.index==0){
					return false
				}
				this.$refs.line.style.left = (this.left+90)+'px'
				this.left += 90
				this.index--
			},
			// 左侧预案库
			getEmergentIntend() {
				this.$http.getMapEmergentIntend().then((res) => {
					if (res.code == 200) {
						let data = res.result
						let data1 = data.emergentPlantypeList
						this.countList[1].count = data.planCount || 0
						this.countList[0].count = data.resplanCount || 0
						this.tabLeftList = data1
						data1[0].emergentPlanLevelList.forEach(item => {
							let obj = {}
							obj.levelName = item.levelName
							obj.levelCount = item.levelCount
							obj.levelColor = item.levelColor
							obj.subShow = false
							obj.emergentPlantypeListList = item.emergentPlantypeListList
							this.conditionList.push(obj)
						})
						console.log(this.conditionList)
					}
				})
			},
			// 右侧进行中计划
			getOngoingEmergentPlan() {
				this.tabRightList = []
				this.$http.getOngoingEmergentPlan().then(res => {
					if (res.code == 200) {
						console.log(res)
						let data = res.result
						let dataDetailed = data[0].emergentPlanList.filter(item => item.workPlaceLat != null ||
							item.grid != null)
						this.tabRightDetailedList = data[0].emergentPlanList
						this.tabRightListData = data
						data.forEach(item => {
							let obj = {}
							obj.title = item.levelName
							obj.count = item.levelCount
							this.tabRightList.push(obj)
						});
						console.log(this.tabRightList)
						let arr = this.gridData(dataDetailed)
						this.markerData = arr
						bus.$emit('emergencyPlanMarker', arr)
					}
				})
			},
			// 右侧计划详情
			planDetailClick(item) {
				if (item.workPlaceLat != null || item.grid != null) {
					let arr = []
					arr.push(item)
					let data = this.gridData(arr)
					bus.$emit('emergencyPlanDetailedMarker', data)
				}
				let strCar = ''
				item.emergentPlanCarList.forEach(item => {
					strCar = strCar + ',' + item.carName
					let obj = {}
					obj.type = 'car'
					obj.keyword = item.carType != null ? item.carType : '车'
					obj.name = item.carName
					obj.desc = item.departName
					this.caseList.push(obj)
				})
				item.car = strCar.substr(1)
				let strPeoples = ''
				item.emergentPlanPersonList.forEach(item => {
					strPeoples = strPeoples + ',' + item.empName
					let obj = {}
					obj.type = 'people'
					obj.keyword = item.empType != null ? item.empType : '清'
					obj.name = item.empName
					obj.desc = item.departName
					this.caseList.push(obj)
				})
				item.peoples = strPeoples.substr(1)

				this.planDetailData = item
				this.leftShow = false
				this.rightShow = false
				this.rightDetailShow = true
			},
			// 关闭计划详情
			closeDetailClick() {
				this.leftShow = true
				this.rightShow = true
				this.rightDetailShow = false
				this.planDetailData = {}
				this.caseList = []
				bus.$emit('emergencyPlanMarker', this.markerData)
			},
			// 左侧预案库背景颜色
			getTabLeftBgColor(item) {
				if (item.levelName == '1级') {
					return "rgba(238,102,102, 0.3)"
				} else if (item.levelName == '2级') {
					return "rgba(115,192,222, 0.3)"
				} else if (item.levelName == '3级') {
					return "rgba(250,200,88, 0.3)"
				} else if (item.levelName == '4级') {
					return "rgba(252,132,82, 0.3)"
				} else if (item.levelName == '5级') {
					return "rgba(234,124,204, 0.3)"
				} else if (item.levelName == '6级') {
					return "rgba(145,204,117, 0.3)"
				} else if (item.levelName == '7级') {
					return "rgba(154,96,180, 0.3)"
				} else {
					return "rgba(153, 0, 0, 0.3)"
				}
			},
			// 左侧预案库box-shadow
			getTabLeftBoxShadow(item) {
				if (item.levelName == '1级') {
					return "rgba(238,102,102, 0.3)"
				} else if (item.levelName == '2级') {
					return "rgba(115,192,222, 0.3)"
				} else if (item.levelName == '3级') {
					return "rgba(250,200,88, 0.3)"
				} else if (item.levelName == '4级') {
					return "rgba(252,132,82, 0.3)"
				} else if (item.levelName == '5级') {
					return "rgba(234,124,204, 0.3)"
				} else if (item.levelName == '6级') {
					return "rgba(145,204,117, 0.3)"
				} else if (item.levelName == '7级') {
					return "rgba(154,96,180, 0.3)"
				} else {
					return "rgba(153, 0, 0, 0.3)"
				}

			},
			// 网格数据
			gridData(data) {
				let arr = []
				data.forEach(item => {
					let obj = {}
					if (item.grid != null) {
						let lngLats = JSON.parse(item.grid.lnglat)
						obj.lng = lngLats[0].lng
						obj.lat = lngLats[0].lat
					} else {
						obj.lng = item.workPlaceLon
						obj.lat = item.workPlaceLat
					}
					obj.grid = item.grid
					obj.type = '应急'
					obj.title = item.planName
					obj.status = item.status
					obj.time = item.resPlanTime
					obj.level = item.levelName
					obj.id = item.id
					arr.push(obj)
				});
				return arr
			},
			// 左侧点击切换
			tabLeftClick(i) {
				this.tabLeftIndex = i
				this.conditionList = []
				this.tabLeftList[i].emergentPlanLevelList.forEach(item => {
					let obj = {}
					obj.levelName = item.levelName
					obj.levelCount = item.levelCount
					obj.levelColor = item.levelColor
					obj.subShow = false
					obj.emergentPlantypeListList = item.emergentPlantypeListList
					this.conditionList.push(obj)
				})
			},
			// 左侧 预案详情
			onClickPlanVisible(item) {
				this.leftPlanData = item
				this.planVisible = true
			},
			// 左侧 预案详情 下发应急计划
			onClickDistributionPlan() {
				bus.$emit('distributionPlan', this.leftPlanData)
			},
			// 右侧  tab切换
			tabRightClick(i) {
				this.tabRightIndex = i
				this.tabRightDetailedList = this.tabRightListData[i].emergentPlanList
			},
			// 盒子拖动
			dragDiv(e) {
				if(this.tabLeftList.length<4){
					return false
				}
				let odiv = e.target.id != '' ? e.target : e.path[3]; //获取目标元素
				// //算出鼠标相对元素的位置
				let disX = e.clientX - odiv.offsetLeft;
				document.onmousemove = (e) => { //鼠标按下并移动的事件
					//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
					let left = e.clientX - disX;
					if (left > -200 && left < 0) {
						odiv.style.left = left + 'px';
					}
				};
				document.onmouseup = (e) => {
					document.onmousemove = null;
					document.onmouseup = null;
				};
			},
			// 绘制网格
			drawGrid(item) {
				let isFinish = item.rptCarWork.tangciWorkByGrid && item.rptCarWork.tangciWorkByGrid === item.rptCarWork
					.tangCi
				let config = {
					color: isFinish ? '#0A9DFF' : '#FBAC13',
					weight: 3,
					opacity: 0.8,
					fillColor: isFinish ? '#0A9DFF' : '#FBAC13',
					fillOpacity: 0.3
				}
				let points
				let viewport
				switch (item.rptCarWork.areaType) {
					case 3: // 圆形
						points = new T.LngLat(item.rptCarWork.lng, item.rptCarWork.lat)
						this.map.addOverLay(new T.Circle(points, item.rptCarWork.radius, config))
						viewport = this.map.getViewport([points])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 4: // 矩形
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Rectangle([points.Lq, points.kq], config))
						viewport = this.map.getViewport([points.Lq, points.kq])
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 5: // 多边形
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Polygon(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					case 6: // 线
						points = JSON.parse(item.rptCarWork.lnglat)
						this.map.addOverLay(new T.Polyline(points, config))
						viewport = this.map.getViewport(points)
						this.map.panTo(viewport.center, viewport.zoom - 1)
						break;
					default:
						break;
				}
			},
			// 绘制路牌
			drawMarker(obj) {

			},
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/input";
	@import "@/static/css/mapDefaultcontrol";

	#dragDiv {
		position: relative;
		/*定位*/
		top: 0px;
		left: 0px;
		width: 700px;
		transition: left 1s;
	}

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: hidden;

		.left-cont {
			color: #ffffff;
			position: relative;

			.left-cont-title {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 26px;
				display: flex;
				align-items: center;

				.left-cont-title-icon {
					width: 36px;
					background: url(../../../../assets/main/e_title_bg.png);
					background-position: bottom;
					background-size: cover;
				}
			}

			.left-cont-count {
				font-size: 16px;
				color: #CCCCCC;
				font-weight: 500;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20px 0 30px;

				.left-cont-count-item {
					display: flex;
					/* align-items: center; */
					margin-right: 44px;
					img{
						width: 50px;
						height: 50px;
						margin-right: 10px;
					}

					.left-cont-count-item-icon {
						width: 64px;
						height: 64px;
						line-height: 64px;
						text-align: center;
						border: 1px solid rgba(255, 255, 255, 0.2);
						border-radius: 50%;
						margin-right: 16px;
					}

					.left-cont-count-item-text {
						display: flex;
						flex-direction: column;
						justify-content: center;
						.left-cont-count-item-text-title {
							margin-bottom: 10px;
						}

						.left-cont-count-item-text-count {
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}

				.left-cont-count-item:last-child {
					margin-right: 0;
				}
			}

			.left-cont-tab {
				// width: 700px;
				display: flex;
				align-items: center;
				margin-bottom: 14px;

				.left-cont-tab-item {
					width: 90px;
					height: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					cursor: pointer;
					// padding: 0 20px;
					border-radius: 6px;

					.left-cont-tab-item-title {
						font-size: 14px;
						color: #FFFFFF;
						font-weight: 500;
					}

					.left-cont-tab-item-count {
						font-size: 16px;
					}
				}

				.left-cont-tab-item-in {
					color: #02B8FC;
					background: url(../../../../assets/new/new_plan_bgc.png) no-repeat center center;
					background-size: 100% 100%;
				}
			}
			.left-cont-condition::-webkit-scrollbar{
							display: none;
						}
			.left-cont-condition {
				height: 215px;
				overflow-y: scroll;

				.left-cont-condition-item {
					margin-left: 27px;
					.item-top {
						width: 310px;
						height: 70px;
						background-size: cover;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 24px 0 34px;
						cursor: pointer;

						.left-cont-condition-item-left {
							font-size: 16px;
						}

						.left-cont-condition-item-right {
							display: flex;
							align-items: center;
							font-size: 16px;

							.left-cont-condition-item-right-icon {
								margin-left: 4px;
								transition: 0.2s;
							}

							.current-icon {
								transform: rotate(180deg);
							}
						}
					}

					.item-cont {
						width: 300px;
						margin-left: 5px;
						.item-cont-list-item {
							cursor: pointer;
							background: rgba(23, 27, 31, 0.3);
							border-radius: 2px;
							padding: 20px 32px;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 2px;

							.item-cont-list-item-delate {
								display: flex;
								justify-content: space-between;
								width: 100%;
							}
						}

						.item-cont-list-item:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-cont {
			color: #ffffff;

			.right-cont-title {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 26px;
				display: flex;
				align-items: center;

				.right-cont-title-icon {
					width: 36px;
					background: url(../../../../assets/main/e_title_bg.png) no-repeat center center;
					background-position: bottom;
					background-size: cover;
				}
			}

			.right-cont-tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22px 0 26px;
				margin: 28px 0 18px;

				.right-cont-tab-item {
					width: 90px;
					height: 60px;
					color: #FFFFFF;
					font-weight: 500;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.right-cont-tab-item-title {
						font-size: 14px;
					}

					.right-cont-tab-item-count {
						color: #FFFFFF;
						font-size: 16px;
						font-weight: bold;
					}
				}

				.right-cont-tab-item-in {
					background: url(../../../../assets/new/new_plan_bgc.png) 0 0 no-repeat;
					background-size: cover;
					.right-cont-tab-item-count{
						color: #02B8FC;
					}
				}
			}
			.right-cont-list{
				height: 460px;
				overflow: auto;
			}
			.right-cont-list::-webkit-scrollbar{
				display: none;
			}
			.right-cont-detail {
				/* padding: 0 1rem; */
				font-size: 16px;
				color: #FFFFFF;
				line-height: 1;
				.right-cont-detail-line{
					width: 282px;
					height: 1px;
					background: url(../../../../assets/new/new_img_line.png) 0 0 no-repeat;
					background-size: 100% 100%;
					margin-left: 35px;
				}
				.right-cont-detail-item {
					min-height: 230px;
					padding: 18px 26px 18px 30px;
					color: rgba(255, 255, 255, 0.65);

					.right-cont-detail-item-title {
						display: flex;
						align-items: center;
						font-size: 16px;
						font-weight: bold;
						color: #ffffff;
						margin-bottom: 12px;

						span {
							font-size: 14px;
							margin-left: 4px;
						}
					}

					.right-cont-detail-item-status {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.right-cont-detail-item-status-time {
							font-size: 16px;
						}

						.right-cont-detail-item-status-status {
							width: 54px;
							height: 26px;
							font-size: 14px;
							color: #FFFFFF;
							background: #CCA556;
							border-radius: 13px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.right-cont-detail-item-plan {
						margin: 12px 0 20px;
						font-size: 14px;
					}

					.right-cont-detail-item-place {
						margin-bottom: 10px;
						font-size: 14px;
					}

					.right-cont-detail-item-tab {
						display: flex;
						height: 54px;
						background: rgba(255, 255, 255, 0.04);
						margin-top: 20px;

						.right-cont-detail-item-tab-item {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;

							.right-cont-detail-item-tab-item-count {
								margin-left: 16px;
								display: flex;
								flex-direction: column;

								span:first-child {
									font-size: 14px;
								}

								span:last-child {
									color: rgba(255, 255, 255, 0.85);
									font-size: 20px;
								}
							}
						}
					}
				}
			}
		}
	}

	.right-plan {
		width: 362px;
		height: 767px;
		position: fixed;
		top: 80px;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;
		color: #ffffff;
		.right-plan-close{
			position: absolute;
			top: 57px;
			right: 40px;
			cursor: pointer;
		}
		.right-plan-detail{
			font-size: 16px;
			color: #CCCCCC;
			font-weight: 500;
			line-height: 1;
		}
		.right-plan-title {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16px 0 12px;
			background: rgba(255, 255, 255, 0.15);
		}

		.right-plan-cont {
			padding: 24px 40px 0px 36px;

			.right-plan-cont-msg {
				

				.right-plan-cont-msg-title {
					/* mask-border: 8px; */
					color: #FFFFFF;
					font-weight: bold;
					display: flex;
					margin-bottom: 20px;

					p:first-child {
						margin-right: 20px;
					}

					p:last-child {
						color: #CCCCCC;
						font-weight: 400;
					}
				}

				.right-plan-cont-msg-item {
					margin-bottom: 20px;
					color: #CCCCCC;
					display: flex;

					p:first-child {
						width: 84px;
						text-align: right;
					}
					p:last-child{
						width: 210px;
					}
				}

				.right-plan-cont-msg-imgs {
					margin-bottom: 20px;

					.right-plan-cont-msg-imgs-img {
						display: flex;
						flex-wrap: wrap;

						img {
							width: 140px;
							height: 100px;
							border-radius: 6px;
							margin-right: 8px;
						}
					}
				}
			}
			.right-plan-cont-line{
				display: flex;
				justify-content: center;
				img{
					width: 282px;
					height: 1px;
				}
			}
			.right-plan-cont-case {
				font-size: 16px;
				color: #FFFFFF;
				font-weight: 400;
				line-height: 1;

				.right-plan-cont-case-title {
					font-weight: bold;
					margin: 20px 0 14px;
				}

				.right-plan-cont-case-cont {
					max-height: 200px;
					overflow: auto;

					.right-plan-cont-case-cont-item {
						width: 280px;
						height: 50px;
						line-height: 1;
						background: url(../../../../assets/new/new_plan_car.png) 0 0 no-repeat;
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						img {
							width: 28px;
							height: 28px;
							margin: 0 10px;
						}
					}

					.right-plan-cont-case-cont-item-msg {
						div:nth-child(1) {
							/* margin-bottom: 6px; */
							color: #ffffff;
						}

						div:nth-child(2) {
							font-size: 0.75rem;
						}
					}
				}

				.right-plan-cont-case-cont::-webkit-scrollbar {
					width: 1px;
					color: #494949;
					background-color: #494949;
				}
			}
		}
	}

	// 预案详情
	.plan-detail{
		width: 934px;
		height: 497px;
		background: url(../../../../assets/new/new_img_934.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding: 67px 74px 0 70px;
		.plan-detail-top{
			display: flex;
			justify-content: space-between;
			.plan-detail-top-title{
				font-size: 20px;
				color: #00BAFF;
				font-weight: bold;
			}
			img{
				width: 38px;
				height: 38px;
				cursor: pointer;
			}
		}
	}
	.plan-cont {
		p {
			text-align: center;
			font-size: 20px;
			color: #fff;
			font-weight: bold;
			margin-top: 15px;
		}
		.plan-cont-img{
			display: flex;
			justify-content: center;
			margin: 20px 0 36px;
			img{
				width: 282px;
				height: 1px;
			}
		}

		ul {
			font-size: 16px;
			color: #FFFFFF;
			font-weight: bold;
			border-bottom: 1px solid rgba(13,157,255,.5);
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 10px;
			margin-bottom: 30px;

			li {
				width: 60%;
				margin-bottom: 30px;

				span {
					color: #CCCCCC;
				}
			}
			li:nth-child(2n){
				width: 40%;
			}
		}
	}

	.distribution-plan {
		.distribution-plan-btn{
			width: 120px;
			height: 48px;
			font-size: 16px;
			color: #0D9DFF;
			font-weight: bold;
			border: 1px solid #0D9DFF;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.leftIcon{
		position: absolute;
		top: 98px;
		left: 18px;
	}
	.rightIcon{
		position: absolute;
		top: 98px;
		right: 18px;
	}

	::v-deep {
		.work-detail {
			display: flex;
			justify-content: flex-end;
			/* cursor: pointer; */
		}
		.ivu-modal-content {
			background-color: rgba(0, 0, 0, 0);
			box-shadow: 0 0 5px 0 rgba(37,187,150,0);
			.ivu-modal-body{
				padding: 0;
				line-height: 1;
			}
		}
	}
</style>
